<template>
  <div class="main">
    <div class="subjectDetailBox">
      <headerBack>
        <b class="my-center" slot="my-center"></b>
        <img @click="showFilter = true" class="my-right" slot="my-right" src="~/static/images/filter.png" alt="" />
      </headerBack>
      <scrollerEdit ref="scrollerBottom" lock-x :bounce="false" @on-scroll-bottom="handleReachButton" :scroll-bottom-offst="300">
        <div>
          <div class="scroll-wrapper">
            <div style="height: 0.4rem;"></div>
            <div class="list" v-if="tabIndex == 3">
              <div class="term flex-h" v-for="item in consultationList" :key="item.id" @click="goDetail(item.id)">
                <img class="left" :src="item.imgUrl" alt />
                <div class="flex1 right">
                  <span>{{ item.title }}</span>
                  <b></b>
                </div>
              </div>
              <load-more :show-loading="showVideoLoad" :tip="tipVideomsg"></load-more>
              <div style="height: 0.5rem;"></div>
            </div>
          </div>
        </div>
      </scrollerEdit>
    </div>
    <div v-transfer-dom>
      <popup v-model="showFilter" height="8rem">
        <div style="width: 100%; background-color: #fff; height: 8rem; margin: 0 auto; border-radius: 5px;">
          <div style="padding: 20px 0;" class="areaBox">
            <img @click="showFilter = false" class="close" src="~/static/images/com_icon_back_close_44.png" alt="" />
            <div class="data-wrapper">
              <div class="year-month">
                <!-- <img  src="../../../static/icon/leftarrow.png" alt="" /> -->
                <!-- <span @click="preMon">上月</span> -->
                <img @click="preMon" src="~/static/images/com_icon_arrow_left_gray_32.png" alt="" />
                <span>{{ currentYear }}-{{ currentMonth + 1 }}</span>
                <!-- <span @click="nextMon">下月</span> -->
                <img @click="nextMon" src="~/static/images/com_icon_arrow_right_gray_32.png" alt="" />
              </div>
              <div class="rili-box">
                <div class="week-box">
                  <span>周日</span>
                  <span>周一</span>
                  <span>周二</span>
                  <span>周三</span>
                  <span>周四</span>
                  <span>周五</span>
                  <span>周六</span>
                </div>
                <ul class="date">
                  <li v-for="(item, index) in list" :key="index">
                    <div class="day">
                      <span @click="getCurrectday(item, item.m, item.d)" :class="{ 'text-color': item.cur, 'bg-color': item.y === year && item.m === month && item.d === day, 'blue-color': selectDay === item.d && item.m === currentMonth + 1 }">{{ item.d }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
import { getTopics } from '~/api/school'
import { getConsultationList } from '~/api/identity'
import headerBack from '~/components/headerBack'
import ls from 'store2'
import { LoadMore, TransferDom, Popup } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import courseItem from '../curriculum/components/courseItem'
export default {
  directives: {
    TransferDom,
  },
  components: {
    courseItem,
    scrollerEdit,
    LoadMore,
    headerBack,
    Popup,
  },
  created() {},
  data() {
    return {
      year: new Date().getFullYear(), // 今日年份
      month: new Date().getMonth() + 1, // 今日月份
      day: new Date().getDate(), // 今日日份
      currentYear: '', // 当前显示年份
      currentMonth: '', // 当前显示月份 0-11,显示时加一
      currentDay: '', // 当前显示日份
      monthDays: [], // 1-12月的天数
      list: [],
      currentWeekday: '',
      selectDay: '',
      showFilter: false,
      showVideoLoad: true, //分割线
      tipVideomsg: '加载更多',
      showArticleLoad: true,
      tipArticlemsg: '加载更多',
      showTuijianLoad: true,
      tipTuijianmsg: '加载更多',
      tabIndex: 1,
      videoList: [],
      textList: [],
      consultationList: [],
      showBuyVipModle: false,
      serverName: '查看专属升学课程',
      currentPage: 1,
      selectDate: '',
    }
  },
  watch: {},
  mounted: function() {
    this.$visit('CourseHome')
    this.getConsultationList()
    this.currentWeekday = new Date().getDay()
    // Object.assign(this.$data, this.$options.data())
    this.getMenology()
  },
  methods: {
    getCurrectday(item, month, day) {
      console.log('item', item)
      if (item.cur) {
        this.selectDay = day
        let myid = item.id
        let selectMonth = item.m < 10 ? (selectMonth = '0' + item.m) : (selectMonth = item.m)
        let selectDay = item.d < 10 ? (selectDay = '0' + item.d) : (selectDay = item.d)
        this.selectDate = item.y + '-' + selectMonth + '-' + selectDay
        this.getConsultationList()
        this.showFilter = false
      }
    },

    preMon() {
      if (this.currentMonth === 0) {
        this.currentYear--
        this.currentMonth = 11
      } else {
        this.currentMonth--
      }
      this.currentDay = 1
      let currentDate = this.currentYear + '-' + (this.currentMonth + 1) + '-' + this.currentDay
      this.currentWeekday = new Date(currentDate).getDay()
      this.currentWeekday = this.repalceDay(this.currentWeekday)
      this.showCalender('pre')
      this.selectDay = ''
    },
    nextMon() {
      if (this.currentMonth === 11) {
        this.currentYear++
        this.currentMonth = 0
      } else {
        this.currentMonth++
      }
      this.currentDay = 1
      let currentDate = this.currentYear + '-' + (this.currentMonth + 1) + '-' + this.currentDay
      this.currentWeekday = new Date(currentDate).getDay()
      this.currentWeekday = this.repalceDay(this.currentWeekday)
      this.showCalender('next')
      this.selectDay = ''
    },
    repalceDay(weedday) {
      let weeks = ['天', '一', '二', '三', '四', '五', '六']
      return weeks[weedday]
    },
    getMenology() {
      this.showCalender()
      this.currentWeekday = this.repalceDay(this.currentWeekday)
      this.currentDay = this.newDate.getDate()
      // })
    },
    isLeap(year) {
      // 判断是不是闰年
      return year % 100 === 0 ? (year % 400 === 0 ? 1 : 0) : year % 4 === 0 ? 1 : 0
    },

    showCalender(type) {
      this.list = []
      this.newDate = new Date()
      //   console.log('this.newDate: ', this.newDate)
      if (!type) this.currentYear = this.newDate.getFullYear()
      if (!type) this.currentMonth = this.newDate.getMonth()
      this.monthDays = [31, 28 + this.isLeap(this.currentYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      // this.currentDay = this.newDate.getDate()
      this.firstDay = new Date(`${this.currentYear}-${this.currentMonth + 1}-1`)
      this.firstnow = this.firstDay.getDay() // 当月第一日是星期几 1-7
      // if (this.firstnow === 0) this.firstnow = 7
      if (this.firstnow > 0 || this.firstnow === 0) {
        // 前一个月份
        let monIndex = this.currentMonth
        let year
        if (monIndex === 0) {
          year--
          monIndex = 11
        } else {
          monIndex--
        }
        for (let i = 0; i < this.firstnow; i++) {
          this.list.unshift({
            y: year,
            m: monIndex + 1,
            d: this.monthDays[monIndex] - i,
          })
        }
      }
      for (let i = 0; i < this.monthDays[this.currentMonth]; i++) {
        // 当前月份
        this.list.push({
          id: '',
          y: this.currentYear,
          m: this.currentMonth + 1,
          d: i + 1,
          cur: true,
        })
      }
      let num = (this.monthDays[this.currentMonth] + this.firstnow) % 7
      let counts = 7
      if (this.list.length < 35) {
        counts = 14
      }
      // if (num > 0) {
      // 下个月份
      let monIndex2 = this.currentMonth
      let year2
      if (monIndex2 === 11) {
        year2++
        monIndex2 = 0
      } else {
        monIndex2++
      }
      for (let i = 0; i < counts - num; i++) {
        this.list.push({
          y: year2,
          m: monIndex2 + 1,
          d: i + 1,
        })
      }
      this.list.forEach((item) => {
        if (this.month === item.m && this.day === item.d) {
          this.initId = item.id
        }
      })
    },

    handleReachButton() {
      if (this.onFetching) {
        return false
      }
      this.onFetching = true
      if (this.currentPage < this.totalPages) {
        this.currentPage = this.currentPage + 1
        let obj = {
          pageNo: this.currentPage,
          pageSize: 20,
          isSxConference: this.$route.query.state * 1,
          createDate: this.selectDate,
        }
        getConsultationList(obj)
          .then((res) => {
            this.tabIndex = 3
            if (res.code === '0') {
              let newArr = res.data.list
              this.consultationList = this.consultationList.concat(newArr)
              this.totalPages = Math.ceil(res.data.total / 20)
            }
            this.onFetching = false
          })
          .finally(() => {})
      } else {
        this.showVideoLoad = false
        this.tipVideomsg = '没有更多咨询会'
      }
    },
    goDetail(id) {
      this.commonJs.gopush('consultationDetail?id=' + id)
    },
    getConsultationList() {
      this.$loading('open')
      let obj = {
        pageNo: 1,
        pageSize: 20,
        isSxConference: this.$route.query.state * 1,
        createDate: this.selectDate,
      }
      getConsultationList(obj)
        .then((res) => {
          console.log('res: ', res)
          this.tabIndex = 3
          if (res.code === '0') {
            this.consultationList = res.data.list
          }
          this.totalPages = Math.ceil(res.data.total / 20)
          if (this.totalPages < 2) {
            this.showVideoLoad = false
            this.tipVideomsg = '没有更多咨询会'
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
  },
  beforeDestroy() {},
}
</script>

<style scoped lang="less">
.subjectDetailBox {
  width: 100%;
  height: 100vh;
  background: white;
  .my-right {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.15rem;
  }
  h1 {
    background: #fff;
    z-index: 10;
    position: relative;
    font-size: 0.5rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 1.2rem;
    display: block;
    height: 1.2rem;
    padding-left: 0.35rem;
    box-sizing: border-box;
  }
  //   .scroll-wrapper {
  //   }
}

.list {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.term {
  width: 100%;
  height: 1.9rem;
  margin-bottom: 0.3rem;
  .left {
    width: 3.2rem;
    height: 100%;
    background: url('~@/static/header.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 0.1rem;
  }
  .right {
    padding-left: 0.3rem;
    box-sizing: border-box;
    span {
      display: block;
      font-size: 0.3rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      height: 0.8rem;
    }
    b {
      display: block;
      font-size: 0.28rem;
      font-family: 'PingFangSC-Regular', PingFangSC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-top: 0.5rem;
      height: 0.4rem;
    }
  }
}
.data-wrapper {
  margin-top: 0.5rem;
  .year-month {
    width: 5rem;
    height: 1rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    img {
      width: 0.4rem;
      height: 0.4rem;
    }
    span {
      flex: 1;
      text-align: center;
      font-size: 0.36rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(1, 1, 1, 1);
    }
  }
  .rili-box {
    padding: 0 0.25rem;
    box-sizing: border-box;

    .week-box {
      width: 100%;
      display: flex;
      height: 0.8rem;
      align-items: center;
      span {
        flex: 1;
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(29, 29, 38, 1);
        opacity: 0.77;
        text-align: center;
      }
    }
  }
}
ul {
  //   border-bottom: solid 0.01rem rgba(220, 220, 220, 1);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 0.2rem;
  width: 100%;
  padding-left: 0;
  li {
    flex-grow: 1;
    min-width: 1rem;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #999;
    font-size: 0.24rem;

    .day {
      font-weight: bold;
      color: rgba(29, 29, 38, 0.3);
      font-size: 0.28rem;
      width: 1rem;
      height: 0.8rem;
      span {
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        font-weight: bold;
        color: rgba(29, 29, 38, 0.3);
        line-height: 0.8rem;
        margin: 0 auto;
        text-align: center;
        position: relative;
      }
      .text-color {
        font-size: 0.28rem;
        font-weight: bold;
        color: rgba(29, 29, 38, 1);
        line-height: 0.8rem;
      }
      .bg-color {
        background-color: @mainColor;
        border-radius: 50%;
        color: #fff;
      }
      .blue-color {
        background: rgba(220, 232, 255, 1);
        border-radius: 50%;
      }
      .ricehng-active:after {
        content: '';
        position: absolute;
        width: 0.08rem;
        height: 0.08rem;
        bottom: -0.1rem;
        left: 0.36rem;
        background: #1266ff;
        border-radius: 50%;
      }
      .gray-active:after {
        content: '';
        position: absolute;
        width: 0.08rem;
        height: 0.08rem;
        bottom: -0.1rem;
        left: 0.36rem;
        background: gray;
        border-radius: 50%;
      }
    }
  }
}
.areaBox {
  position: relative;
  .close {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    right: 0.3rem;
    top: 0.3rem;
  }
}
</style>
